<template>
	<view class="tab_contaiiner">
		<view v-for="(item,index) in list" :key="index" class="tab_item"  @click="tab_click(item,index)" :class="{active:activeIndex === index}">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:0
			};
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods:{
			tab_click(item,index){
				this.activeIndex = index
				this.$emit('tab',{
					data:item,
					id:index
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab_contaiiner{
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		justify-content:center;
		.tab_item{
			border: 0px;
			margin: 0px;
			padding: 20upx 25upx;
			font-size: 30upx;
			&.active{
				// border-bottom: 3px solid #0080d1;
				color: #0080d1;
				font-weight: bold;
				// background-color: #0080d1;
			}
		}
	}
</style>
